<template>
  <div class="chat-box">
    <!-- 聊天内容显示区域 -->
    <div class="chat-content" ref="chatContent">
      <!-- 首次进入显示欢迎信息 -->
      <div class="welcome-message" v-if="messages.length === 0">
        <h1>我是潍理小智</h1>
        <p>你好，同学</p>
      </div>
      
      <!-- 消息列表 -->
      <div class="messages">
        <template v-for="(message, index) in messages">
          <!-- 用户消息气泡 -->
          <div v-if="message.type === 'user'" :key="'user-'+index" class="message-wrapper user">
            <div class="message user-message" v-html="markdownToHtml(message.content)">
            </div>
          </div>
          <!-- AI消息气泡 -->
          <div v-else :key="'ai-'+index" class="message-wrapper ai">
            <div class="message ai-message" v-html="markdownToHtml(message.content)">
            </div>
          </div>
        </template>
      </div>
    </div>

    <!-- 底部工具栏 -->
    <div class="bottom-toolbar">
      <!-- 快捷工具按钮 -->
      <div class="tool-buttons">
        <button class="tool-btn"><i>✍️</i></button>
        <button class="tool-btn"><i>📖</i></button>
        <button class="tool-btn"><i>🎨</i></button>
        <button class="tool-btn"><i>暂定</i></button>
      </div>
      
      <!-- 输入区域 -->
      <div class="input-footer">
        <div class="input-container">
          <input 
            v-model="inputValue" 
            type="text" 
            placeholder="请输入你的问题吧,我可以给予你帮助😏"
            @keyup.enter="startStreamConnection"
          >
          <button @click="startStreamConnection">
            <span>发送</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { marked } from 'marked' // markdown解析器
import { ElMessage } from 'element-plus' // Element Plus的消息提示组件
import { getToken } from '@/utils/auth' // 获取token的工具函数

export default defineComponent({
  name: 'ChatBox',
  setup() {
    // 聊天消息列表
    const messages = ref([])
    // 输入框的值
    const inputValue = ref('')
    // 事件源对象,用于SSE连接
    const eventSource = ref(null)
    // 用于存储当前正在累积的markdown文本
    const currentMarkdownBuffer = ref('')
    // 聊天内容区域的DOM引用
    const chatContent = ref(null)
    // 加载状态标志
    const isLoading = ref(false)

    // 重置聊天功能
    const resetChat = () => {
      console.log('执行重置操作')
      // 清空消息列表,触发欢迎界面显示
      messages.value = []
      
      // 关闭流式连接
      if (eventSource.value) {
        eventSource.value.close()
        eventSource.value = null
      }
      
      // 清空输入框和缓冲区
      inputValue.value = ''
      currentMarkdownBuffer.value = ''
      
      // 确保滚动到顶部并重新渲染欢迎界面
      nextTick(() => {
        if (chatContent.value) {
          chatContent.value.scrollTop = 0
        }
      })
    }

    // 将Markdown文本转换为HTML
    const markdownToHtml = (content) => {
      return marked(content || '')
    }

    // 滚动到聊天区域底部
    const scrollToBottom = () => {
      nextTick(() => {
        if (chatContent.value) {
          chatContent.value.scrollTop = chatContent.value.scrollHeight
        }
      })
    }

    // 开始流式连接
    const startStreamConnection = async () => {
      try {
        isLoading.value = true
        if (!inputValue.value.trim()) return
        
        // 添加用户消息到消息列表
        messages.value.push({
          type: 'user',
          content: inputValue.value
        })

        // 立即清空输入框，提供更好的用户体验
        const messageContent = inputValue.value
        inputValue.value = '' // 在发送请求前就清空输入框

        // 创建fetch请求
        const token = getToken()
        const response = await fetch(`${import.meta.env.VITE_APP_BASE_API}/aliyun/ask?inputValue=${encodeURIComponent(messageContent)}`, {
          method: 'GET',
          headers: {
            'Authorization': token ? `Bearer ${token}` : '', // 添加token认证
            'Accept': 'text/event-stream', // 接受流式响应
            'Cache-Control': 'no-cache', // 禁用缓存
            'Connection': 'keep-alive' // 保持连接
          }
        })

        // 检查响应状态
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`)
        }
        
        // 获取响应流的读取器
        const reader = response.body?.getReader()
        if (!reader) {
          throw new Error('Reader not available')
        }

        // 用于解码和存储响应数据
        const decoder = new TextDecoder()
        let buffer = ''

        // 循环读取流数据
        while (true) {
          const { done, value } = await reader.read()
          
          if (done) break
          
          // 解码新的数据块
          const text = decoder.decode(value, { stream: true })
          
          // 检查是否收到结束标记
          if (text.includes('[DONE]')) {
            break
          }
          
          // 处理接收到的消息
          if (!currentMarkdownBuffer.value) {
            // 如果是第一条消息,创建新的AI回复
            messages.value.push({
              type: 'ai',
              content: text
            })
          } else {
            // 更新最后一条AI消息
            messages.value[messages.value.length - 1].content = currentMarkdownBuffer.value + text
          }
          
          // 累积消息内容
          currentMarkdownBuffer.value += text
          // 滚动到底部
          scrollToBottom()
        }

        // 清空输入和缓冲区
        inputValue.value = ''
        currentMarkdownBuffer.value = ''
        
      } catch (error) {
        console.error('Stream error:', error)
        ElMessage.error('连接出错，请重试')
      } finally {
        isLoading.value = false
        currentMarkdownBuffer.value = '' // 确保缓冲区也被清空
      }
    }

    // 组件卸载前清理工作
    onBeforeUnmount(() => {
      if (eventSource.value) {
        eventSource.value.close()
      }
    })

    // 暴露给模板使用的属性和方法
    return {
      messages,
      inputValue,
      chatContent,
      markdownToHtml,
      startStreamConnection,
      resetChat
    }
  }
})
</script>

<style scoped>
.chat-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  position: relative;
}

.welcome-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.welcome-message h1 {
  font-size: 2.5em;
  color: #333;
  margin-bottom: 20px;
}

.welcome-message p {
  font-size: 1.5em;
  color: #666;
}

.bottom-toolbar {
  position: sticky;
  bottom: 0;
  background-color: white;
  border-top: 1px solid #e8e8e8;
  padding: 10px 20px;
  z-index: 10;
}

.tool-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.tool-btn {
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 4px;
}

.tool-btn:hover {
  background-color: #f5f5f5;
}

.input-container {
  display: flex;
  gap: 10px;
  background-color: white;
  padding: 10px;
  border-radius: 8px;
}

.input-container input {
  flex: 1;
  padding: 12px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  font-size: 14px;
}

.input-container button {
  padding: 12px 24px;
  background-color: #4e6ef2;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.message-wrapper {
  display: flex;
  margin: 20px 0;
}

.message-wrapper.user {
  justify-content: flex-end;
}

.message {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.user-message {
  background-color: #4e6ef2;
  color: white;
}

.ai-message {
  background-color: #f5f5f5;
  color: #333;
}

.chat-content::-webkit-scrollbar {
  width: 6px;
}

.chat-content::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.chat-content::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.chat-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style> 